<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzFor="name" nzRequired>Name</nz-form-label>
    <nz-form-control [nzSpan]="14">
      <input nz-input name="name" formControlName="name" type="text" id="name" [(ngModel)]="cate.cateName" placeholder="write category name">
      <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">The input is not valid cate name!</nz-form-explain>
    </nz-form-control>
  </nz-form-item >
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzFor="summary" nzRequired>Summary</nz-form-label>
    <nz-form-control [nzSpan]="14">
      <textarea nz-input rows="2" formControlName="summary" placeholder="write summary" [(ngModel)]="cate.summary"></textarea>
      <nz-form-explain *ngIf="validateForm.get('summary').dirty && validateForm.get('summary').errors">The input is not valid cate summary!</nz-form-explain>
    </nz-form-control>
  </nz-form-item >
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzFor="order" nzRequired>Order</nz-form-label>
    <nz-form-control [nzSpan]="14">
      <input nz-input name="order" type="text" formControlName="order" id="order" [(ngModel)]="cate.orderBy" placeholder="write category order" value="0">
      <nz-form-explain *ngIf="validateForm.get('order').dirty && validateForm.get('order').errors">The input is not valid cate order!</nz-form-explain>
    </nz-form-control>
  </nz-form-item >
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzFor="cover" nzRequired>Cover</nz-form-label>
    <nz-form-control [nzSpan]="14">
      <nz-upload class="avatar-uploader"
                 nzAction="http://localhost:8080/upload"
                 nzName="file"
                 nzListType="picture-card"
                 [nzShowUploadList]="false"
                 [nzCustomRequest]="fileReq">
        <ng-container *ngIf="!coverPic">
          <i nz-icon type="plus"></i>
          <div class="ant-upload-text">Upload</div>
        </ng-container>
        <img width="200" height="200" *ngIf="coverPic" [src]="coverPic" class="avatar">
      </nz-upload>
    </nz-form-control>
  </nz-form-item >
  <nz-form-item>
    <nz-form-control [nzSpan]="14" [nzOffset]="6">
      <button nz-button class="login-form-button" [nzType]="'primary'">Create</button>
    </nz-form-control>
  </nz-form-item >
</form>
